<template>
	<div :class="{ editComponent: true, elCodeSelect: true, required: rowField.required }">
		<el-select v-model="value" clearable @change="returnValue" :disabled="isDisabled" @blur="blurEvent">
			<el-option
				v-for="item in options"
				:key="item[rowField.dataRequestValue]"
				:label="item[rowField.dataRequestLabel]"
				:value="item[rowField.dataRequestValue]">
			</el-option>
		</el-select>
	</div>
</template>

<script>
import { getFunction } from '@/utils/ruoyi'

export default {
  name: "customSelect",
  props:{
	rowField: {
		type: Object,
		default: () => {}
	},
	rowData: {
		type: Object,
		default: () => {}
	},
	rowIndex: {
		type: Number,
		default: 0
	},
	config: {
		type: Object,
		default: () => {}
	},
	bindValue: {
		type: String,
		default: ''
	},
	dataSource: {
		type: Array,
		default: () => []
	}
  },
  data() {
    return {
		value: '',
		rowDataValue: this.rowData,
		options: null,
		tipsText: '',
		isTips: false,
    };
  },
  watch: {
	'rowField.dataSource': function(value) {
		this.options = value
	},
	'rowData': function(value) {
		if (value) {
			this.value = this.bindValue ? this.bindValue : this.rowData[this.rowField.fieldName];
		}
	}
  },
  computed: {
	isDisabled() {
		if (this.rowField.oldDataFlag === 'Y' && this.rowData.id !== undefined) {
			return true
		} else {
			return false
		}
	}
  },
  mounted() {
	this.rowData[this.rowField.fieldName] = this.rowField.defaultValue;
	this.value = this.bindValue ? this.bindValue : this.rowData[this.rowField.fieldName];
	this.options = this.rowField.dataSource;
  },
  methods: {
	// 执行自定义代码
    validCode(item, row, code) {
      const newFun = `function (item, row, that){${code}}`
      var performFun = getFunction(newFun);
      return performFun(item, row, this)
    },
	// 事件触发
	blurEvent() {
		if (this.rowField.jsCode && this.rowField.jsCode !== '' && this.rowField.jsMethod === 'blur') {
			if (!this.validCode(this.rowField, this.rowData, this.rowField.jsCode)) {
				return false
			} else {
				this.validCode(this.rowField, this.rowData, this.rowField.jsCode)
			}
		}
	},
	// 返回值
	returnValue() {
		// this.$forceUpdate();
		// const data = this.options.find(item => item[this.rowField.dataRequestValue] === this.value);
		// if (data) {
		// 	Object.keys(this.rowDataValue).forEach(item => {
		// 		if (data[item]) {
		// 			this.rowDataValue[item] = data[item]
		// 		}
		// 	})
		// }
		
		this.rowDataValue[this.rowField.fieldName] = this.value
		this.$emit('blur', this.rowData, this.rowIndex)
	}
  },
};
</script>

<style lang="scss" scoped>
	.editComponent ::v-deep .el-input--medium .el-input__inner {
		height: 32px;
		line-height: 32px;
	}
	.editComponent.required {
		position: relative;
	}
	.editComponent.required::after {
		content: "*";
		position: absolute;
		top: 0;
		left: -9px;
		color: red;
		line-height: 1.2
	}
</style>
